/**
 * @author:hanbo
 * @weather:天气开关状态
 */
var controlState=["false","false","false","false"];
var slideX;
var slidex;

/**
 * 底部菜单按钮
 */
function bottomMenuOut() {
    var div=document.createElement('div');
    div.id="menuPanel";
    document.body.appendChild(div);
    var html="<ul>" +
        "<li><img src='img/weather.png'/><div class='text'><a>天气</a></div>" +
        "<div class='switch'><div class='switchstate' data-flag='true' onclick='switchBtn(this)'></div></div></li>" +
        "<li><img src='img/scalecontrol.png'/><div class='text'><a>比例尺</a></div>" +
        "<div class='switch'><div class='switchstate' data-flag='true' onclick='switchBtn(this)'></div></li>" +
        "<li><img src='img/location.png'/><div class='text'><a>位置</a></div>" +
        "<div class='switch'><div class='switchstate' data-flag='true' onclick='switchBtn(this)'></div></li>" +
        "<li><img src='img/magnifier.png'/><div class='text'><a>标记地图</a></div>" +
        "<div class='switch'><div class='switchstate' data-flag='true' onclick='switchBtn(this)'></div></li>" +
        "</ul>"+
        "<img src='img/return.png' onclick='removeParent(this)'/>";
    div.innerHTML=html;

    /**
     * 根据变量修改初始开关
     * @type {NodeList}
     */
    var swbtn=document.getElementsByClassName("switchstate");
    for(var i=0;i<swbtn.length;i++){
       if(controlState[i]=="false"){
           swbtn[i].dataset.flag=controlState[i];
           swbtn[i].style.float="left";
           swbtn[i].style.backgroundImage="url('img/close2.png')";
           swbtn[i].parentNode.style.backgroundImage="url('img/close1.png')";
       }
    }
    $("#menuPanel").animate({height:'45vh'});
}

/**
 * switch按钮的状态转换
 * @param obj 传入的html对象
 */
function switchBtn(obj) {
    if(obj.dataset.flag=="true"){
        obj.style.float="left";
        obj.style.backgroundImage="url('img/close2.png')";
        obj.parentNode.style.backgroundImage = "url('img/close1.png')";
        obj.dataset.flag = "false";
        switchFunction(obj, false);
    }else{
        obj.style.float="right";
        obj.style.backgroundImage="url('img/open2.png')";
        obj.parentNode.style.backgroundImage="url('img/open1.png')";
        obj.dataset.flag="true";
        switchFunction(obj, true);
    }
    var swbtn=document.getElementsByClassName("switchstate");
    for(var i=0;i<swbtn.length;i++){
        if(swbtn[i]==obj){
            controlState[i]=swbtn[i].dataset.flag;
            return;
        }
    }
}

/**
 * 开关切换后执行
 */
function switchFunction(obj,bool) {
    var btnAll=document.getElementsByClassName("switchstate");
    for(var i=0;i<btnAll.length;i++){
        if(btnAll[i] == obj){
            switch(i){
                case 0:addWeather(bool);break;
                case 1:ruleScale(bool);break;
                case 2:window.Android.startLocate(bool);break;
                case 3:markerManager(bool);break;
                default:break
            }
            return;
        }

    }
}


/**
 * 右侧地图弹出功能
 * @constructor
 */
function LayerControlOut() {
    var div=document.createElement('div');
    div.id="LayerControlPanel";
    document.body.appendChild(div);
    var html="<ul>" +
        "<div class='mapStyle'>地图模式</div>"+
        "<li><div><img src='img/color.png' onclick='tabLayer(0)'/><br/><span class='mapname'>二维地图</span></div>" +
        "<div><img src='img/earth.png' onclick='tabLayer(5)'/><br/><span class='mapname'>三维地图</span></div></li>" +
        "<div class='mapStyle'>颜色主题</div>"+
        "<li class='mapLi'><div><img src='img/gray.png' onclick='tabLayer(2)'/><br/><span class='mapname'>灰色</span></div>" +
        "<div><img src='img/blue.png' onclick='tabLayer(1)'/><br/><span class='mapname'>午夜蓝</span></div></li>" +
        "<div class='mapStyle'>地图内容</div>"+
        "<li class='mapLi'><div><img src='img/terrin.png' onclick='tabLayer(4)'/><br/><span class='mapname'>地形图</span></div>" +
        "<div><img src='img/img.png' onclick='tabLayer(3)'/><br/><span class='mapname'>影像</span></div></div></li>" +
        "</ul>"+
        "<img src='img/return.png' onclick='removeDiv(this)'/>";
    div.innerHTML=html;
    $("#LayerControlPanel").animate({width:'70vw'});
    touchSlide(div);
}
function touchSlide(obj) {
    obj.addEventListener('touchstart',touch, false);
    obj.addEventListener('touchmove',touch, false);
    obj.addEventListener('touchend',touch, false);
}
function touch(event) {

    var touch = event.targetTouches[0];
    // 把元素放在手指所在的位置
    switch(event.type){
        case "touchstart":
            slideX = touch.pageX ;
            break;
        case "touchmove":
            slidex=touch.pageX;
            console.log("move");
            break;
        case "touchend":
            if(slidex-slideX>50){
                slidex=0;
                removeLayerControl();
            }
            break;
        default:break;
    }
}
function removeLayerControl() {
    var div=document.getElementById("LayerControlPanel");
    div.removeEventListener('touchstart',touch, false);
    div.removeEventListener('touchmove',touch, false);
    div.removeEventListener('touchend',touch, false);
    document.body.removeChild(div);

}

/**
 *
 */
function showMessage(con) {
    var div=document.createElement('div');
    div.id="message";
    document.body.appendChild(div);
    div.innerHTML="<div id='messageText'>"+con+"</div><div id='removeMessage' onclick='removeParent(this)'>确定</div>";
    div.style.opacity=0;
    $("#message").animate({opacity:1});
}
/**
 * 移除div
 * @param obj
 */
function removeParent(obj) {
    document.body.removeChild(obj.parentNode);
}
/**
 * 根据ID移除DIV
 * @param id
 */
function removeDiv(id) {
    document.body.removeChild(document.getElementById(id));
}
function addWeather(bool) {
    if (bool) {
        var html=
            "<iframe  id='fancybox-frame' name='fancybox-frame1504147110822' " +
            "frameborder='0' scrolling='no' hspace='0'  " +
            "src='http://i.tianqi.com/index.php?c=code&a=getcode&id=35&h=55&w=200'>" +
            "</iframe>"+
            "<div id='fancybox-frameDiv'></div>";
       document.body.insertAdjacentHTML('beforeend',html);
       document.getElementById("fancybox-frameDiv").onclick=function (e) {
           e.preventDefault();//阻止鼠标的默认点击事件
           e.stopImmediatePropagation() ;//阻止冒泡事件发生
       }
    } else {
        removeDiv("fancybox-frame");
    }
}

/**
 * 展示了视频
 */
function showVideo(){
    var div=document.createElement('div');
    div.id="showVideo";
    document.body.appendChild(div);
    div.innerHTML="<a>http://19.16.71.127:8887/</a><video id='video' preload='none' src='http://19.16.71.127:8887/' controls='controls'></video>" +
        "<div id='removeVideo' onclick='removeParent(this)'>关闭</div>";
    document.getElementById("video").play();
    // div.style.opacity=0;
    // $("#message").animate({opacity:1});
}
